<template>
    <div class="block">
      <el-row>
        <el-carousel height="470px">
          <el-carousel-item v-for="item in tableData" :key="item">
            <el-image
              style="width: 100%; height: 100%"
              :src=item>
            </el-image>
          </el-carousel-item>
        </el-carousel>
      </el-row>
  </div>
</template>

<script>
export default {
  data(){
    return{
      tableData:[
        "https://img14.360buyimg.com/pop/s590x470_jfs/t1/183491/12/33757/67078/641126a7F1e3e7d81/f0bfe7581747e80e.jpg.avif",
        "https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/45758802408/FocusFullshop/CkNqZnMvdDEvMTg4NjEzLzEvMzMwMTEvNDEyNTMxLzYzZmZhNzdmRmFmNjQ4NThhL2M4NzBlMzAyNWRkMjQwMTQucG5nEgk0LXR5XzBfNTUwAjjui3pCGQoV57q95LuV5YWw54mb5aW25Lmz5ZOBEAFCFgoS5byA5ZCv57K-6Ie055Sf5rS7EAJCEAoM56uL5Y2z5oqi6LStEAZCCgoG56eN6I2JEAdY6NO_u6oB/cr/s/q.jpg",
        "https://imgcps.jd.com/ling4/100038004391/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-640dbabb61fd0b75722ca734/7afdae0b/cr/s/q.jpg",
        "https://imgcps.jd.com/ling4/100032149194/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-640dbabb61fd0b75722ca749/3a27d7f8/cr/s/q.jpg"
      ]
    }
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
    color: rgb(48, 118, 211);
    font-size: 14px;
    opacity: 0.75;
    line-height: 470px;
    margin: 0;
  }

  .block{
    width: 590px;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
</style>
